<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS过渡、转换、动画快速入门教程</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            margin: 0;
            background-color: #f0f0f0;
        }

        .container {
            text-align: center;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 800px;
            width: 100%;
            margin-bottom: 20px;
        }

        h1 {
            color: #333;
            margin-bottom: 10px;
        }

        h2 {
            color: #444;
            margin-top: 30px;
            margin-bottom: 15px;
            border-bottom: 2px solid #ddd;
            padding-bottom: 8px;
        }

        h3 {
            color: #555;
            margin-top: 20px;
        }

        p {
            color: #666;
            line-height: 1.6;
            margin-bottom: 15px;
            text-align: left;
        }

        .demo-section {
            margin: 30px 0;
        }

        .demo-box {
            width: 150px;
            height: 150px;
            margin: 20px auto;
            background-color: #4CAF50;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            border-radius: 8px;
            cursor: pointer;
        }

        .transition-box {
            transition: all 0.5s ease;
        }

        .transition-box:hover {
            background-color: #2196F3;
            transform: scale(1.1) rotate(5deg);
        }

        .transform-box {
            transition: all 0.5s ease;
        }

        .animation-box {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); background-color: #2196F3; }
            100% { transform: scale(1); }
        }

        .controls {
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

        button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            background-color: #2196F3;
            color: white;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #0b7dda;
        }

        .code-section {
            margin-top: 20px;
            background-color: #f8f8f8;
            border-radius: 4px;
            padding: 15px;
            text-align: left;
            overflow-x: auto;
        }

        pre {
            margin: 0;
            font-family: 'Courier New', Courier, monospace;
            font-size: 13px;
            line-height: 1.4;
        }

        code {
            color: #d63384;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }

        .feature-card {
            background-color: #f9f9f9;
            border-radius: 6px;
            padding: 15px;
            text-align: left;
            transition: transform 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
        }

        .feature-card h4 {
            color: #333;
            margin-top: 0;
        }

        .feature-card ul {
            padding-left: 20px;
            margin: 10px 0;
        }

        .feature-card li {
            margin-bottom: 5px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>CSS过渡、转换、动画快速入门</h1>
        <p>本教程将帮助您快速了解CSS中三个核心动效技术：过渡(transition)、转换(transform)和动画(animation)。这些技术可以让您的网页元素动起来，提升用户体验。</p>

        <div class="feature-grid">
            <div class="feature-card">
                <h4>过渡 (Transition)</h4>
                <p>控制元素从一种样式平滑过渡到另一种样式的时间和方式。</p>
                <ul>
                    <li>设置过渡的持续时间</li>
                    <li>定义过渡的缓动函数</li>
                    <li>指定哪些属性参与过渡</li>
                </ul>
            </div>
            
            <div class="feature-card">
                <h4>转换 (Transform)</h4>
                <p>改变元素的形状、大小和位置，创建2D或3D效果。</p>
                <ul>
                    <li>旋转 (rotate)</li>
                    <li>缩放 (scale)</li>
                    <li>平移 (translate)</li>
                    <li>倾斜 (skew)</li>
                </ul>
            </div>
            
            <div class="feature-card">
                <h4>动画 (Animation)</h4>
                <p>通过关键帧定义元素在不同时间点的样式，创建复杂动画。</p>
                <ul>
                    <li>使用@keyframes定义关键帧</li>
                    <li>控制动画的持续时间和重复次数</li>
                    <li>设置动画的播放方向</li>
                </ul>
            </div>
        </div>

        <!-- 过渡示例 -->
        <div class="demo-section">
            <h2>1. CSS过渡 (Transition) 示例</h2>
            <p>过渡效果使元素从一种样式平滑过渡到另一种样式，而不是立即改变。将鼠标悬停在下方的盒子上查看效果：</p>
            <div class="demo-box transition-box">悬停我</div>
            <div class="code-section">
                <h3>CSS代码:</h3>
                <pre><code>.transition-box {
  transition: all 0.5s ease; /* 所有属性过渡，持续0.5秒，缓动函数为ease */
}

.transition-box:hover {
  background-color: #2196F3; /* 改变背景色 */
  transform: scale(1.1) rotate(5deg); /* 同时应用转换效果 */
}</code></pre>
            </div>
        </div>

        <!-- 转换示例 -->
        <div class="demo-section">
            <h2>2. CSS转换 (Transform) 示例</h2>
            <p>转换可以改变元素的形状和位置。点击下方按钮查看不同的转换效果：</p>
            <div class="demo-box transform-box" id="transformBox">转换效果</div>
            <div class="controls">
                <button onclick="applyTransform('rotate(45deg)')">旋转</button>
                <button onclick="applyTransform('scale(1.2)')">缩放</button>
                <button onclick="applyTransform('translate(30px, 20px)')">平移</button>
                <button onclick="applyTransform('skew(10deg, 5deg)')">倾斜</button>
                <button onclick="applyTransform('rotate(30deg) scale(1.1) translate(20px, 10px)')">组合效果</button>
                <button onclick="applyTransform('none')">重置</button>
            </div>
            <div class="code-section">
                <h3>常用转换属性:</h3>
                <pre><code>/* 旋转 */
transform: rotate(45deg);

/* 缩放 */
transform: scale(1.2);

transform: scaleX(1.2); /* 仅X轴 */
transform: scaleY(0.8); /* 仅Y轴 */

/* 平移 */
transform: translate(20px, 10px);

transform: translateX(20px); /* 仅X轴 */
transform: translateY(10px); /* 仅Y轴 */

/* 倾斜 */
transform: skew(10deg, 5deg);

transform: skewX(10deg); /* 仅X轴 */
transform: skewY(5deg); /* 仅Y轴 */

/* 组合使用 */
transform: rotate(30deg) scale(1.1) translate(20px, 10px);</code></pre>
            </div>
        </div>

        <!-- 动画示例 -->
        <div class="demo-section">
            <h2>3. CSS动画 (Animation) 示例</h2>
            <p>动画通过关键帧定义元素在不同时间点的样式。下方的盒子正在执行脉冲动画：</p>
            <div class="demo-box animation-box" id="animationBox">动画效果</div>
            <div class="controls">
                <button onclick="document.getElementById('animationBox').style.animationPlayState = 'paused'">暂停</button>
                <button onclick="document.getElementById('animationBox').style.animationPlayState = 'running'">播放</button>
                <button onclick="changeAnimation('pulse')">脉冲动画</button>
                <button onclick="changeAnimation('bounce')">弹跳动画</button>
                <button onclick="changeAnimation('spin')">旋转动画</button>
            </div>
            <div class="code-section">
                <h3>动画代码示例:</h3>
                <pre><code>/* 定义动画 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); background-color: #2196F3; }
  100% { transform: scale(1); }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 应用动画 */
.animation-box {
  animation: pulse 2s infinite; /* 动画名称、持续时间、重复次数 */
}</code></pre>
            </div>
        </div>

        <!-- 综合应用 -->
        <div class="demo-section">
            <h2>4. 综合应用示例</h2>
            <p>实际项目中，我们经常会结合这三种技术创建更丰富的效果。以下是一些常见的应用场景：</p>
            <div class="feature-grid">
                <div class="feature-card">
                    <h4>按钮悬停效果</h4>
                    <ul>
                        <li>使用transition实现平滑过渡</li>
                        <li>使用transform添加缩放效果</li>
                        <li>改变背景色和阴影</li>
                    </ul>
                </div>
                <div class="feature-card">
                    <h4>卡片翻转效果</h4>
                    <ul>
                        <li>使用perspective创建3D空间</li>
                        <li>使用transform-style: preserve-3d</li>
                        <li>使用rotateY实现翻转</li>
                    </ul>
                </div>
                <div class="feature-card">
                    <h4>页面滚动动画</h4>
                    <ul>
                        <li>结合JavaScript检测滚动位置</li>
                        <li>使用transform和opacity实现元素进入效果</li>
                        <li>使用transition控制过渡时间</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 转换示例的JavaScript
        function applyTransform(transformValue) {
            const box = document.getElementById('transformBox');
            box.style.transform = transformValue;
        }

        // 动画示例的JavaScript
        function changeAnimation(animationName) {
            const box = document.getElementById('animationBox');
            
            // 移除所有动画类
            box.classList.remove('pulse-animation', 'bounce-animation', 'spin-animation');
            
            // 添加所选动画类
            if (animationName === 'pulse') {
                box.style.animation = 'pulse 2s infinite';
            } else if (animationName === 'bounce') {
                box.style.animation = 'bounce 1s infinite';
            } else if (animationName === 'spin') {
                box.style.animation = 'spin 3s linear infinite';
            }
        }
    </script>
</body>
</html>